<style>
.layout-body {
  font-family: 楷体;
}

.layout-header {
  position: fixed;
  top: 0;
  left: 0px;
  width: 100%;
  z-index: 100;
  background: #282C30;
  height: auto;
}

.layout-header h1 {
  color: #ffffff;
  line-height: 60px;
  font-size: 24px;
  font-weight: bold;
  font-family: tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;
  float: left;
  font-weight: normal;
}

.el-menu-item.is-active {
  background: #CCCCCC !important;
}

.el-menu--horizontal > .el-menu-item {
  color: #dfdfdf;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 20px;
}

/*未访问状态*/
a:link {
  color: #ffffff
}

/*访问过状态*/
a:visited {
  color: #ffffff
}

/*悬停状态*/
a:hover {
  color: pink
}

/*点击/激活状态*/
a:active {
  color: blue
}

.layout-main {
  margin-top: 33px;
}

#app {
  overflow: hidden;
}

.headerDiv {
  width: 1200px;
  margin: 0 auto;
}

.p-bottom {
  font-size: 18px;
  color: #dfdfdf;
  text-align: center;
  margin: 5px 0;
}

.el-avatar {
  margin-top: 10px;
}

.el-avatar > img {
  display: block;
  width: 50px;
}

.username {
  float: left;
  margin-left: 5px;
}

.avatarAndName {
  position: relative;
  overflow: hidden;
}

.avatar {
  float: left;
  bottom: 50px;
  margin-bottom: 10px;
}

.login-logout {
  position: relative;
  top: 0px;
  font-size: 18px;
}

.logout {
  margin-left: 10px;
}

</style>

<template>
  <div id="app">
    <el-container class="layout-body">
      <el-header class="layout-header">
        <div class="headerDiv">
          <h1 class="el-icon-circle-plus"> 社区疫情防控服务中心</h1>
          <div style="float: right;color:#dfdfdf;margin-left: 30px;line-height: 60px">
            <div class="avatarAndName" v-show="loginSuccess">
              <el-avatar :size="38" shape="circle" :src="user.photo==null||user.photo==null?'':require('../views/img/user/'+user.photo)"
                         class="avatar"></el-avatar>
              <span class="username">{{ user.username }}</span>
              <el-popconfirm
                  @confirm="logout()"
                  confirm-button-text='确定'
                  cancel-button-text='取消'
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定要退出登录吗？">
                <el-button class="logout" type="text" slot="reference">退出登录</el-button>
              </el-popconfirm>
            </div>
            <span class="login-logout" v-show="isEnableLogout">
              <el-button-group>
                <el-button size="mini" @click="login()" round type="success">登录</el-button>
                <el-button size="mini" @click="reg()" round type="success">注册</el-button>
              </el-button-group>
            </span>
          </div>
          <div style="float: right">
            <el-menu style="font-size: 24px;background: #282C30;"
                     :default-active="activeMenuItemPath"
                     router
                     class="el-menu-demo"
                     mode="horizontal"
                     @select="handleSelect">
              <el-menu-item index="/sys-user/index">社区首页</el-menu-item>
              <el-menu-item index="/sys-user/forum">社区论坛</el-menu-item>
              <el-menu-item index="/sys-user/takeaway" disabled>商品代买</el-menu-item>
              <el-menu-item index="" disabled>外出报备</el-menu-item>
              <el-menu-item index="/sys-user/healthy" disabled>健康报备</el-menu-item>
              <el-menu-item index="/sys-user/returnHome">返乡报备</el-menu-item>
              <el-menu-item index="/sys-user/userCenter">个人中心</el-menu-item>
            </el-menu>
          </div>
        </div>
      </el-header>

      <el-main class="layout-main">
        <router-view/>
      </el-main>
      <el-footer style="height: 240px; background: #282C30">

        <div style="width: 1200px;padding:0;margin:0 auto;overflow: hidden;">
          <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
          <div style="width: 25%;height:190px;float: left;font-size: 15px;">
            <p style="font-size: 22px;color: #dfdfdf;margin:5px 0">众志成城抗疫情，守护健康靠大家！</p>
            <br>
            <el-divider style="width: 60%"></el-divider>
            <br>
            <p style="font-size: 1px;color: #999">Copyright © 2021 豫ICP备12345678号</p>
          </div>
          <div style="float: left;width: 25%;height: 190px">
            <p class="p-bottom">投诉电话：17818915270</p></div>
          <div style="float: left;width: 25%;height: 190px">
            <p class="p-bottom">举报电话：17818915270</p></div>
          <div style="float: left;width: 25%;height: 190px;" align="right">
            <img src="../views/img/1.jpg" alt="图片加载失败" style="width: 120px;height: 120px;">
            <br>
            <p style="color: #dfdfdf;font-size:24px;">社区微信号</p>
          </div>
        </div>
      </el-footer>
    </el-container>

  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      loginSuccess: false,
      isEnableLogout: true,
      activeMenuItemPath: ''
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    //前往登录
    login() {
      this.$router.push('/login');
    },
    //前往注册
    reg() {
      this.$router.push('/reg');
    },

    //执行退出登录
    logout() {
      let userJwt = localStorage.getItem('userJwt');
      this.axios.create({'headers': {'Authorization': userJwt}})
          .post("http://localhost:8080/user/logout").then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          localStorage.setItem('userJwt', '');
          localStorage.setItem('user', '');
          localStorage.setItem('currentUserPhoto', '');
          localStorage.setItem('currentUsername', '');
          localStorage.setItem('currentUserId', '');
          location.href = 'http://localhost:9000/sys-user/index';
          this.$notify.success({
            title: '提示',
            message: '退出登录成功！',
            showClose: false,
            position: 'top-right'
          });
        }
      })
    },

    //加载当前用户
    loadUser() {
      let userJwt = localStorage.getItem('userJwt');
      console.log('localStorage userJwt=' + userJwt);
      this.axios.create({'headers': {'Authorization': userJwt}})
          .get("http://localhost:8080/user/currentUser").then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.loginSuccess = true;
              this.isEnableLogout = false;
              this.user = responseBody.data;
              localStorage.setItem('user', JSON.stringify(this.user));
              this.photoUrl = this.user.photo;
              localStorage.setItem('currentUserPhoto', this.user.photo);
              localStorage.setItem('currentUsername', this.user.username);
              localStorage.setItem('currentUserId', this.user.id);
            } else {
              console.log(responseBody.message);
            }
          }
      );
    }
  },
  created() {
    //取出cookie里面的数据 显示到页面中
    let arr = document.cookie.split(";");
    console.log("cookie数据是：" + arr);
    this.loadUser();
    let currentPath = this.$router.currentRoute.path;
    if (currentPath.startsWith('/sys-user/forumStandard')) {
      this.activeMenuItemPath = '/sys-user/forum';
    } else if (currentPath.startsWith('/sys-user/updatePass')) {
      this.activeMenuItemPath = '/sys-user/userCenter';
    } else if (currentPath.startsWith('/sys-user/returnHomeAddNew') ||currentPath.startsWith('/sys-user/ReturnHomeUpdate') ) {
      this.activeMenuItemPath = '/sys-user/returnHome';
    } else {
      console.log('当前页面是' + this.$router.currentRoute.path)
      this.activeMenuItemPath = currentPath;
    }
  }
}
</script>

